<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app7">
    <el-container>
        <!--垂直和水平导航栏-->
        <el-header style="width: 100%;"> <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
            <el-menu-item index="3" style="float:right"><a href="adminLogin.jsp" target="_blank" >退出登录</a></el-menu-item>
            <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px" v-model="adminname"> 管理员,{{adminname}},欢迎您！</h5></li>
            <div style="height: 1px;float:right" >
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
            </div>
        </el-menu></el-header>
        <el-container>
            <el-aside width="200px"style="height: 650px"><el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="width: 100%;height:100%"
                    :inline="true">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>场地管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="toFieldManage">场地信息</el-menu-item>
                        <el-menu-item index="2-2" @click="addField()">增加场地</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="toUserManage()">用户信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>公告管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="toNoticeManage">公告信息</el-menu-item>
                        <el-menu-item index="3-2">新增公告</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>评论管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="toCommentManage()">评论信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>预约管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1" @click="toFieldBookManage()">场地预约信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu></el-aside>

            <!--所有用户表格-->
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a href='admin.html'>后台管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>

                <el-table
                        ref="multipleTable"
                        :data="userData"
                        tooltip-effect="dark"
                        style="float:left;width: auto">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="userid"
                            label="用户ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="password"
                            label="密码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="性别"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="性别"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="reviseUser(scope.row)" type="text" size="small">修改</el-button>
                            <el-button type="text" size="small"@click="isDeleteUser(scope.row)">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
               </el-main>
        </el-container>
    </el-container>

    <!--更新用户的表单-->
    <el-dialog
            title="更新场地信息"
            :visible.sync="updateUserdialogVisible"
            width="40%"
    >
        <el-form ref="form" :model="updateUser" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="updateUser.username"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="updateUser.sex" placeholder="请选择场性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="密码">
                <el-input  v-model="updateUser.password"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input  v-model="updateUser.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitUpdate()">更新用户信息</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el: "#app7",

        mounted(){
            this.selectAllUser();
            this.getAdminName();


        },
        methods: {
            //获得登录的管理员姓名
            getAdminName(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getLoginAdmin",
                    method:"get"
                }).then(function (resp){
                    _this.adminname=resp.data;
                })
            },
            //跳转到公告管理
            toNoticeManage(){
                window.location.href="adminNoticeManage.html";

            },
            //跳转到场地管理
            toFieldManage(){
                window.location.href="admin.html"
            },
            //跳转到评论管理
            toCommentManage(){
                window.location.href="adminCommentManage.html";
            },
            //是否删除确认框
            isDeleteUser(row){
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteUser(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //管理员删除用户
            deleteUser(row){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/adminDeleteUserById?userid="+row.userid,
                    method:"get",
                }).then(function (resp){
                    if(resp.data=="delete_suc") {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.selectAllUser();
                    }

                })
            },
            //管理员提交修改的用户信息
            onSubmitUpdate(){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/updateUser",
                    method:"post",
                    data:_this.updateUser
                }).then(function (resp){
                    if(resp.data=="update_suc") {
                        _this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        _this.updateUserdialogVisible = false;
                        _this.selectAllUser();
                    }

                })

            },
            //更新用户信息
            reviseUser(row){
                this.updateUserdialogVisible=true;
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getUpdateUser?userid="+row.userid,
                    method:"get"
                }).then(function (resp){
                    _this.updateUser=resp.data;
                })

            },
            //管理员查询所有用户
            selectAllUser(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/adminSelectAllUser",
                    method:"get"
                }).then(function (resp){
                    _this.userData=resp.data;
                })
            },
            //跳转到场地管理
            toFieldManage(){
                window.location.href="admin.html"
            },
            //跳转到用户管理页面
            toUserManage(){
                window.location.href="adminUserManager.html"
            },
            //跳转到场地预约管理页面
            toFieldBookManage(){
                window.location.href="adminBookManage.html"
            },

            /*导航栏展开方法*/
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            /*导航栏展开方法*/


        },
        data() {
            return {
                //登录的管理员模型
                adminname:'',
                //导航栏模型
                activeIndex: '1',
                activeIndex2: '1',
                //用户表格模型
                userData: [],
                //要更新的用户模型
                updateUser:{},

                //添加场地弹窗显示状态
                AddFielddialogVisible:false,
                //更新用户弹窗显示状态
                updateUserdialogVisible:false,

            };
        }

    })

</script>

</body>
</html>